import React, { Component } from "react";

const Header = (props) => {
  // console.log(props);

  //函数式组件默认的时候,函数的参数就是我们要的 props
  return (
    <>
      <div>欢迎来到 {props.name} 班级</div>
      <div>{props.num}</div>
      <div>{String(props.bool)}</div>
    </>
  );
};  



//类组件需要通过 this.props 来进行传递参数的接收获取
//在函数式组件中没有 this
//类组件中需要通过 this 进行访问
//
class Content extends Component {
  render() {
    // console.log(this);
    return (
      <>
        <div> {this.props.contentName} 学习 React 实际上就是在学 JavaScript </div>
      </>
    );
  }
}




export default class App extends Component {
  render() {
    return (
      <div>
        {/* 属性传值的时候,只要不是纯字符串,我们都要加 {} */}
        <Header name="H5-2218" num={10} bool={true}></Header>
        <Content contentName='张一' />
      </div>
    );
  }
}
